<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>画线</title>
  </head>
  <body>
    <script src="./../three.min.js"></script>
    <script>
      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      // 创建镜头
      const camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        500
      );

      //   镜头位置
      camera.position.set(0, 0, 100);
      //   镜头朝向
      camera.lookAt(0, 0, 0);

      const scene = new THREE.Scene();

      //   ——————————————
      //create a blue LineBasicMaterial
      const material = new THREE.LineBasicMaterial({ color: 0x0000ff });

      //   创建定点几何体
      const points = [];
      points.push(new THREE.Vector3(-10, 0, 0));
      points.push(new THREE.Vector3(0, 10, 0));
      points.push(new THREE.Vector3(10, 0, 0));

      const geometry = new THREE.BufferGeometry().setFromPoints(points);
      //
      const line = new THREE.Line(geometry, material);

      //
      scene.add(line);
      renderer.render(scene, camera);
    </script>
  </body>
</html>
